<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			#divA 
			{
				width: 200px;
				height: 200px;
				background-color: lightsalmon;
				padding: 10px;
			}

			#divB 
			{
				width: 100px;
				height: 100px;
				background-color: lightblue;
				padding: 10px;
			}

			#divC 
			{
				width: 50px;
				height: 50px;
				background-color: lightgoldenrodyellow;
				padding: 10px;
			}
		</style>
		</head>
		<body>
			<div id="divA">
				<div id="divB">
					<div id="divC">
						C
					</div>
					B
				</div>
				A
			</div>

			<script>
				// 1。 冒泡 (默认   从里到外)
				// divA.onclick = function(){
				// 	alert("A被点击了")
				// }
				// divB.onclick = function(){
				// 	alert("B被点击了")
				// }
				// divC.onclick = function(){
				// 	alert("C被点击了")
				// }


				// 2. 捕获  (默认   从外到里)
				divA.addEventListener("click", function() {
					alert("A被点击了")
				}, true)
				divB.addEventListener("click", function() {
					alert("B被点击了")
				}, true)
				divC.addEventListener("click", function() {
					alert("C被点击了")
				}, true)
			</script>
		</body>
</html>
